<template>
  <div class="single-page">
    <div class="main-content">
      <div class="search-layout" @keyup.enter="searchHandleFunc">
        <div class="search-item">
          <LabelDatePicker v-model:selectDateRange="searchState.selectDateRange" labelName="操作时间："
                           @selectedChangeFunc="dateChangeFunc"/>
        </div>
        <div class="search-item">
          <div class="search-label_80 margin-left_20">用户：</div>
          <a-input v-model:value="searchState.creator" placeholder="" style="margin-left: 5px"/>
        </div>
        <a-button type="primary" class="margin-left_50" @click="searchHandleFunc">
          <template #icon>
            <SearchOutlined/>
          </template>
          查询
        </a-button>
      </div>
      <div class="table-style">
        <a-table :columns="columns" :data-source="dataSource" bordered class="adjust-table" size="middle"
                 :pagination="pagination" :rowKey="(record: any) => record.id" :loading="state.loading"
                 @change="handleTableChange" @resizeColumn="handleResizeColumn">
        </a-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {inject, onMounted, reactive, ref,} from "vue";
import dayjs from "dayjs";
import type {TableColumnsType} from "ant-design-vue";
import {TreeSelect} from "ant-design-vue";
import {post} from "@/service/request";
import {userInfo} from "@/store/user";

const userStore = userInfo();
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const reload: any = inject("reload");

const state = reactive({
  loading: false,
});
const searchState = reactive({
  selectDateRange: [],
  startDate: "",
  endDate: "",
  creator: "",
});

const dateChangeFunc = (date: any) => {
  if (date) {
    searchState.startDate = date[0];
    searchState.endDate = date[1];
  } else {
    searchState.startDate = "";
    searchState.endDate = "";
  }
}

const pagination = reactive({
  size: "small",
  showSizeChanger: true,
  position: ["bottomCenter"],
  hideOnSinglePage: true,
  current: 1,
  pageSize: 10,
  total: 0,
  onShowSizeChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize
  },
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize
  },
});

const columns = ref<TableColumnsType>([
  {
    title: "序号",
    dataIndex: "sequence",
    key: "sequence",
    width: 20,
    customRender: ({index}: { index: number }) => {
      return `${(pagination.current - 1) * pagination.pageSize + index + 1
      }`;
    },
    align: "center",
  },
  {
    title: "操作时间",
    dataIndex: "createDate",
    resizable: true,
    key: "createDate",
    width: 100,
    align: "center",
  },
  {
    title: "操作用户",
    dataIndex: "creator",
    resizable: true,
    key: "creator",
    width: 100,
    align: "center",
  },
  {
    title: "日志内容",
    dataIndex: "content",
    resizable: true,
    key: "content",
    width: 140,
    align: "center",
  },
]);

interface DataItem {
  id: number;
  key: string;
  sequence: string;
  name: string;
  phone: string;
  email: string;
  roles: any[];
  status: number;
  creator: string;
  createDate: string;
}

interface SelectData {
  id: number;
  name: string;
  mark: string;
}

// 下拉框数据源
const selectDataSource = ref([] as SelectData[]);

onMounted(() => {
  // 获取用户日志
  getUserLog();
});

const dataSource = ref([] as DataItem[]);
const getUserLog = () => {
  let param = Object.assign(searchState)
  param.startDate = searchState.startDate ? dayjs(searchState.startDate).format('YYYY-MM-DD 00:00:00') : '';
  param.endDate = searchState.endDate ? dayjs(searchState.endDate).format('YYYY-MM-DD 23:59:59') : '';
  post(`/operator/pageList`, param, {
    current: pagination.current,
    size: pagination.pageSize,
  }).then((res: any) => {
    if (res.errCode == 0) {
      dataSource.value = Object.assign(res.data.records);
      pagination.total = res.data.total;
    }
  });
};

const handleTableChange = () => {
  getUserLog();
};
// 查询相关
const searchHandleFunc = () => {
  // 设置用户浏览信息
  pagination.current = 1;
  getUserLog();
};

const handleResizeColumn = (w: any, col: any) => {
  col.width = w;
};
</script>
<style lang="less" scoped>
.single-page {
  .main-content {
    width: 100%;
    height: 100%;
  }

  .ant-modal-root {
    :deep(.ant-modal) {
      width: 100px;
      background: red;
    }

    :deep(.ant-modal-body) {
      background: red;
    }
  }

  .main-content {
    width: 100%;
    height: 100%;
  }

  .search-layout {
    padding: 30px 10px 10px 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .search-label_50 {
      width: 50px;
      text-align: left;
    }

    .search-label_80 {
      width: 85px;
      text-align: left;
    }
  }

  .search-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .search-content,
  .search-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .input-style {
    display: flex;
    align-items: center;
  }

  .table-style {
    margin-top: 20px;
  }
}

.editable-row-operations a {
  margin-right: 8px;
}

.operations-style {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

// 添加角色
.addRole-contain {
  & > div {
    display: flex;
  }

  .addRole-contain_label {
    width: 100px;
  }

  .role-lable {
    width: 75px;
  }
}
</style>
<style lang="less" scoped>
@import "@/style/page.less";

.adjust-table {
  :deep(.ant-table-thead) {
    tr {
      th {
        color: #909399 !important;
        font-weight: 500 !important;
        background: #f5f7fa !important;
      }
    }
  }
}
</style>
